<template>
  <div>
    <div class="registerimg" v-if="this.$store.state.showLogin">
      <img style="opacity: 0.8;left: -5%; position:fixed; width: 73%; height: 100%;" src="https://www.fxpixels.site/tp5/public/static/img/ff.jpg"
        alt="">
      <div style="position:fixed; font-size: 25px; left: 70%; top: 2%;">
        「 登 录 」
      </div>
      <div class="login">
        <Form ref="formItem" :model="formItemLogin" :label-width="80">
          <Row>
            <Col span="4" class="min-width">
            <div class="avatarImage">
              <div class="demo-upload-list">
                <template>
                  <img :src="imgURL">
                </template>
              </div>
            </div>
            <FormItem label="用户名" prop="username">
              <Input :on-change="avatar" :maxlength="12" v-model="formItemLogin.username" placeholder="输入用户名" icon="person"></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
              <Input :maxlength="16" type="password" v-model="formItemLogin.password" placeholder="输入密码" icon="unlocked"></Input>
            </FormItem>
            <FormItem class="optionButton">
              <Button shape="circle" type="ghost" @click="handleReset(formItemLogin)" style="margin-left: 8px">清除</Button>
              <Button shape="circle" type="primary" @click="handleSubmitL(formItemLogin)">登录</Button>
            </FormItem>
            <div class="copyright">
              <p>
                <strong>
                  <span>没有账号？前往
                    <a @click="goToRegister()">「注册」</a>
                  </span>
                </strong>
              </p>
              <br>
              <p>
                <span>Copyright © 2016-2018 像素小站. 粤ICP备17119684号.</span>
              </p>
              <p>
                <span>All rights reserved By FxPixels. </span>
              </p>
            </div>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      imgURL:
        localStorage.useravatar == null || localStorage.useravatar.length == 0
          ? "https://www.fxpixels.site/tp5/public/uploads/20171227/25defd0ae403e5b922ff34eea115f053.jpeg"
          : localStorage.useravatar,
      formItemLogin: {
        username: null,
        password: null
      },
      visible: null
    };
  },
  methods: {
    goToRegister: function() {
      this.$store.state.showLogin = false;
      this.$store.state.showRegister = true;
      this.$store.state.showBackend = false;
    },
    handleSubmitL: function(data) {
      if (data.username == null) {
        this.$Notice.error({
          title: "输入错误",
          desc: "请输入用户名。"
        });
        return false;
      }
      if (data.password == null) {
        this.$Notice.error({
          title: "输入错误",
          desc: "请输入密码。"
        });
        return false;
      }
      var userdata = {
        username: data.username,
        password: md5(data.password)
      };
      // console.log(userdata)
      var that = this;
      this.$axios.post("backend/login", userdata, function(res) {
        if (res == 0) {
          that.$Notice.warning({
            title: "输入错误",
            desc: "用户名 或者 密码不正确，请重新输入。"
          });
          return false;
        } else {
          // console.log(res);
          that.$store.state.username = res.username;
          that.$store.state.avatar = res.avatar;
          that.$store.state.permission = res.permission;
          that.$store.state.showLogin = false;
          that.$store.state.showRegister = false;
          that.$store.state.showBackend = true;
          localStorage.username = res.username;
        }
      });
    },
    handleReset: function() {
      this.formItemLogin = {};
    },
    getData() {}
  },
  computed: {
    avatar: function() {
      if (this.formItemLogin.username) {
        if (this.formItemLogin.username.length > 5) {
          // console.log(this.formItemLogin.username)
          let user = {
            username: this.formItemLogin.username
          };
          var that = this;
          this.$axios.post("backend/loginimage", user, function(res) {
            // console.log(res)
            that.imgURL = res;
          });
        }
      }
    }
  },
  mounted() {}
};
</script>

<style>
.login {
  transform: translateY(76%);
}
</style>
